<template>
  <div class="carousel-box">
    <ul>
      <li v-for="(item, index) of base_img" :key="index" @click="tolianzhan(item.id, index)">
        <span class="bgimg" :style="{ backgroundImage: `url(${IP + item.vthumb})` }"></span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      move: {
        // transform:scale(0)
      },
      base_img: [],
      img2: [
        { img: require("../../assets/image/index/1.png") },
        { img: require("../../assets/image/index/2.png") },
        { img: require("../../assets/image/index/3.png") },
        { img: require("../../assets/image/index/1.png") },
        { img: require("../../assets/image/index/1.png") },
      ],
    };
  },
  created() {
    this.base();
  },
  methods: {
    base() {
      this.$api.get(`${this.tableList}linshizhanlan-1-5`).then((res) => {
        this.base_img = res.data.page.list.slice(0, 5);
      });
    },
    tolianzhan(id, index) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: "临时展览", sort: 55 },
        })
        .catch((err) => {
          err;
        });
    },
    moveover() {
      // this.move.transform='scale(1)'
    },
  },
};
</script>
<style scoped>
.carousel-box {
  overflow: hidden;
  position: relative;
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw;
  height: 100%;
  background: #f2f2f2;
  padding: 30px;
  box-sizing: border-box;
}
ul {
  display: flex;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
}
li {
  width: 500px;
  margin-right: 10px;
  list-style: none;
  cursor: pointer;
  height: calc(100vh - 211px);
}
.bgimg:hover {
  /* background-size: 250px; */

  transform: translateY(3px);
  -webkit-transform: translateY(3px); /*兼容-webkit-引擎浏览器*/
  -moz-transform: translateY(3px); /*兼容-moz-引擎浏览器*/
  box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s linear;
  -moz-transition: transform 0.2s linear; /* Firefox 4 */
  -webkit-transition: transform 0.2s linear; /* Safari and Chrome */
  -o-transition: transform 0.2s linear; /* Opera */
  transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2s linear; /* Firefox 4 */
  -webkit-transition: box-shadow 0.2s linear; /* Safari and Chrome */
  -o-transition: box-shadow 0.2s linear; /* Opera */
}
.bgimg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  display: inline-block;
}
</style>
